<template>
	<div class="form-rules-one-container">
		<el-row class="mb20">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="order-info">
				<div style="display: flex;justify-content: space-between;">
				<el-radio-group v-model="state.param.status"  @change="onRadioChange">
					<el-radio-button label="1">欠款账号</el-radio-button>
					<el-radio-button label="2">余额账户</el-radio-button>
					<el-radio-button label="3">储值卡账户</el-radio-button>
					<el-radio-button label="4">积分账户</el-radio-button>
				</el-radio-group>
				</div>
			</el-col>
		</el-row>
		
		<el-table :data="state.tableData" border row-key="id" style="width: 100%" v-loading="state.loading"
			@selection-change="onSelectionChange" v-if="state.param.status == 1">
			<el-table-column label="ID" width="80">
				<template #default="scope">
					<!-- <span>{{ scope.row.id }}</span> -->
					<span>排序</span>
				</template>
			</el-table-column>
			<el-table-column label="对应订单">
				<template #default="scope">
					<span>对应订单</span>
				</template>
			</el-table-column>
			<el-table-column label="金额变动">
				<template #default="scope">
					<span>+100 / -100</span>
				</template>
			</el-table-column>
			<el-table-column label="当前剩余欠款">
				<template #default="scope">
					<span>100</span>
				</template>
			</el-table-column>
			<el-table-column label="备注">
				<template #default="scope">
					<span>青蛙撒大大</span>
				</template>
			</el-table-column>
			<el-table-column label="日期">
				<template #default="scope">
					<span>未激活数量</span>
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="state.tableData" border row-key="id" style="width: 100%" v-loading="state.loading"
			@selection-change="onSelectionChange" v-if="state.param.status == 2">
			<el-table-column label="ID" width="80">
				<template #default="scope">
					<!-- <span>{{ scope.row.id }}</span> -->
					<span>排序</span>
				</template>
			</el-table-column>
			<el-table-column label="对应订单">
				<template #default="scope">
					<span>对应订单</span>
				</template>
			</el-table-column>
			<el-table-column label="余额变动">
				<template #default="scope">
					<span>+100 / -100</span>
				</template>
			</el-table-column>
			<el-table-column label="剩余金额">
				<template #default="scope">
					<span>100</span>
				</template>
			</el-table-column>
			<el-table-column label="剩余赠金">
				<template #default="scope">
					<span>青蛙撒大大</span>
				</template>
			</el-table-column>
			<el-table-column label="备注">
				<template #default="scope">
					<span>青蛙撒大大</span>
				</template>
			</el-table-column>
			<el-table-column label="日期">
				<template #default="scope">
					<span>未激活数量</span>
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="state.tableData" border row-key="id" style="width: 100%" v-loading="state.loading"
			@selection-change="onSelectionChange" v-if="state.param.status == 3">
			<el-table-column label="ID" width="80">
				<template #default="scope">
					<!-- <span>{{ scope.row.id }}</span> -->
					<span>排序</span>
				</template>
			</el-table-column>
			<el-table-column label="储值卡账户">
				<template #default="scope">
					<span>IDadas1</span>
				</template>
			</el-table-column>
			<el-table-column label="对应订单">
				<template #default="scope">
					<span>对应订单</span>
				</template>
			</el-table-column>
			<el-table-column label="余额变动">
				<template #default="scope">
					<span>+100 / -100</span>
				</template>
			</el-table-column>
			<el-table-column label="剩余金额">
				<template #default="scope">
					<span>100</span>
				</template>
			</el-table-column>
			<el-table-column label="剩余赠金">
				<template #default="scope">
					<span>青蛙撒大大</span>
				</template>
			</el-table-column>
			<el-table-column label="备注">
				<template #default="scope">
					<span>青蛙撒大大</span>
				</template>
			</el-table-column>
			<el-table-column label="日期">
				<template #default="scope">
					<span>未激活数量</span>
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="state.tableData" border row-key="id" style="width: 100%" v-loading="state.loading"
			@selection-change="onSelectionChange" v-if="state.param.status == 4">
			<el-table-column label="ID" width="80">
				<template #default="scope">
					<!-- <span>{{ scope.row.id }}</span> -->
					<span>排序</span>
				</template>
			</el-table-column>
			<el-table-column label="对应订单">
				<template #default="scope">
					<span>对应订单</span>
				</template>
			</el-table-column>
			<el-table-column label="积分变动">
				<template #default="scope">
					<span>+100 / -100</span>
				</template>
			</el-table-column>
			<el-table-column label="当前剩余积分">
				<template #default="scope">
					<span>100</span>
				</template>
			</el-table-column>
			<el-table-column label="备注">
				<template #default="scope">
					<span>青蛙撒大大</span>
				</template>
			</el-table-column>
			<el-table-column label="日期">
				<template #default="scope">
					<span>未激活数量</span>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-footer mt15" style="display: flex; justify-content: flex-end;">
			<el-pagination v-model:current-page="state.param.pageNum" v-model:page-size="state.param.pageSize"
				:pager-count="5" :page-sizes="[10, 20, 30]" :total="state.total"
				layout="total, sizes, prev, pager, next, jumper" background @size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>

<script setup lang="ts" name="pagesFormRulesOne">
import { reactive, onMounted } from 'vue';
import type { saleOrderListData, } from "/@/types/order";
import { orderQuery } from "/@/api/order";


// 定义父组件传过来的值
const props = defineProps({
	data: {
		type: Number,
		default: () => { },
	},
});

// 定义变量内容
const state = reactive({
	loading: false,
	param: {
		type: 0,
		status: 1,
		pageNum: 1,
		pageSize: 10,
	},
	total: 0,
	tableData: [] as Array<saleOrderListData>
});

// 获取订单列表
const getOrderList = async () => {
	state.loading = true;
	const { results } = await orderQuery(state.param);
	state.loading = false;
	state.tableData = results.records.slice(0,1);
	state.total = results.total;
}

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getOrderList();
};

// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getOrderList();
};

// 赋值回显
const initForm = () => {
	state.param.type = props.data;
	getOrderList();
};
// 页面加载时
onMounted(() => {
	initForm();
});
</script>
